import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import request from '../../utils/request'
import { Pagination } from 'antd'
import { Space, Tag } from 'antd-mobile'
import { QqOutlined, WechatOutlined, AlipayCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import { formatDate } from '../../utils/formatDate'
function Index() {
   const [list, setList] = useState([])
   const [total, setTotal] = useState(0)
   const [pageNum, setPageNum] = useState(1)
   const [pageSize, setPageSize] = useState(3)
   const navigate = useNavigate()
   //博客列表请求
   const getList = async () => {
      const res = await request.get('/user/getMasterSelfBlog', {
         params: {
            pageNum: pageNum,
            pageSize: pageSize
         }
      })
      console.log('列表', res)
      //存储数据
      setList(res.data.data)
      setTotal(res.data.total)
   }
   useEffect(() => {
      getList()
   }, [pageNum, pageSize])
   //获取用户信息
   const userData = useSelector(state => state.user.userInfo)

   //分页
   const changeNum = (num, size) => {
      setPageNum(num)
      setPageSize(size)
   }
   //去往博客详情页
   const goDetail = (id) => {
      navigate(`/about/${id}`)
   }
   return (

      <div className='blog'>
         {/* 博客列表渲染 */}

         {/* 左侧区域 */}
         <div>
            {
               list.map(v => {
                  return <dl key={v.id}
                     style={{ display: 'flex', marginBottom: '20px', border: '2px solid #ccc' }}
                     onClick={() => goDetail(v.id)}
                  >
                     <dt style={{ margin: '0px 10px' }}>
                        <img src={v.picture} alt="" style={{ width: '100px', height: '100px' }} />
                     </dt>
                     <dd>
                        <h4 style={{ margin: '10px 0px' }}>{v.title}</h4>
                        <h4 style={{ margin: '10px 0px' }}>{v.tag}</h4>
                        <h4 style={{ margin: '10px 0px' }}>作者:{v.author} 日期:{formatDate(v.update_time)}</h4>
                     </dd>
                  </dl>
               })
            }
            <Pagination
               style={{ float: 'right' }}
               total={total}
               showSizeChanger='true'
               showQuickJumper='true'
               showTotal={(total) => `总共 ${total} 条`}
               onChange={changeNum}
            />
         </div>
         {/* 右侧区域 */}
         <div style={{ width: '240px' }}>
            <div style={{ borderBottom: '2px solid #ccc' }}>
               <dl style={{ marginLeft: '100px' }}>
                  <dt>
                     <dt>
                        <img src={userData.avatar} alt="" style={{ width: '50px', height: '50px', borderRadius: '50%' }} />
                     </dt>
                  </dt>
                  <dd>
                     <h4>
                        {userData.name}
                     </h4>
                  </dd>
               </dl>
               <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                  <span>{total}</span>
                  <span>3</span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                  <span>Articles</span>
                  <span>Tags</span>
               </div>
            </div>

            <div style={{ borderBottom: '2px solid #ccc' }}>
               <div style={{ marginTop: '30px' }}>
                  <h4>Categories</h4>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
                  <span>随笔</span>
                  <span style={{ color: "red" }}>red</span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px' }}>
                  <span>博客</span>
                  <span style={{ color: "green" }}>green</span>
               </div>
            </div>

            <div style={{ borderBottom: '2px solid #ccc' }}>
               <div style={{ marginTop: '30px' }}>
                  <h4>Tags</h4>
               </div>
               {
                  list.map(v => {
                     return <Space wrap>

                        <Tag color='primary' key={v.id} style={{ marginLeft: '10px' }}>{v.tag}</Tag>

                     </Space>
                  })
               }
            </div>



            <div style={{ borderBottom: '2px solid #ccc' }}>
               <div style={{ marginTop: '30px' }}>
                  <h4>Contact</h4>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                  <span><QqOutlined /></span>
                  <span><WechatOutlined /></span>
                  <span><AlipayCircleOutlined /></span>
               </div>
            </div>


            <div style={{ borderBottom: '2px solid #ccc' }}>
               <div style={{ marginTop: '30px' }}>
                  <h4>Friends</h4>
               </div>
               <h4>饭团也有春天</h4>
            </div>
         </div>

      </div>
   )
}

export default Index
